<template>
  <div class='container'>
    <div class="app-container">
      <!-- 标签 -->
      <el-form
          :inline="true"
          v-model="tagsRuleForm"
        >

          <el-form-item label="标签名称" label-width="80px">
            <el-input
              v-model="tagsRuleForm.tagName"
              class="input-width"
            />
          </el-form-item>

          <el-form-item label="状态" label-width="80px">
           <el-select
            v-model="tagsRuleForm.state"
            placeholder="请选择"
            class="input-width"
          >
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
          </el-form-item>

          <el-form-item class="btns">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>

          <el-form-item class="addSubjects">
            <el-button type="success" @click="onAddSubjects">
              <i class="el-icon-edit"></i>
              新增标签
            </el-button>
          </el-form-item>
        </el-form>
    </div>
    <div class="total">
      <i class="el-icon-info"><span class="total-font">共{{ tagsList.counts }}条记录</span></i>
    </div>
    <my-table
      :table-props="{
          data: tagsList.items,
          headerCellStyle: getRowClass
        }"
        :columns="[
          { label: '序号', prop: 'id'},
          { label: '所属学科', prop: 'subjectName'},
          { label: '目录名称', prop: 'directoryName'},
          { label: '创建者', prop: 'username'},
          { label: '创建日期', prop: 'addDate'},
          { label: '面试题数量', prop: 'totals'},
          { label: '状态', prop: 'state'},
          { label: '操作', slotName: 'operators', width: 300}
        ]"
          :pagination-props="{
          pageSize: pageSize,
          pageSizes: [5, 10, 15, 20],
          background: true,
          total: tagsList.counts,
          layout: '->, prev, pager, next, sizes, jumper'
        }"
        :pagination-events="events"
      >
    >
      <template v-slot:operators="scope">
        <el-button type="text" @click="changeState(scope)">
          {{scope.row.state ==='已启用' ? '禁用' : '启用'}}
        </el-button>
        <el-button type="text" @click="editTags(scope)" :disabled="scope.row.state =='已启用'">修改</el-button>
        <el-button type="text" @click="deleteInfo(scope)" :disabled="scope.row.state =='已启用'">删除</el-button>
      </template>
    </my-table>

     <!-- 新增标签弹窗 -->
    <el-dialog
      title= "新增标签"
      :visible.sync="editTagVisible"
      width="400px"
    >
      <el-form
        :model="addtagRuleForm"
        label-width="80px"
      >

        <el-form-item label="所属学科" required>
          <el-select
            v-model="addtagRuleForm.subjectID"
            placeholder="请选择"
            class="input-width"
          >
            <el-option
              v-for="(type, i) in subjectsType"
              :key="i"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="标签名称" required>
          <el-input
            v-model="addtagRuleForm.tagName"
            class="input-width"
          />
        </el-form-item>

      </el-form>

      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" @click="oneditTagOk">确定</el-button>
          <el-button @click="oneditTagClose">取消</el-button>
        </el-col>
      </el-row>

    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { changeState, remove, update, add } from '@/api/hmmm/tags'

export default {
  data () {
    return {
      events: {
        'current-change': this.onCurrentPageChange,
        'size-change': this.onPageSizeChange
      },
      tagsRuleForm: {
        tagName: '',
        state: ''
      },
      addtagRuleForm: {
        subjectID: '',
        tagName: ''
      },
      page: 1,
      pageSize: 10,
      editTagVisible: false
    }
  },
  computed: {
    ...mapState('tags', [
      'tagsList'
    ]),
    ...mapState('subjects', [
      'subjectsType'
    ])
  },
  created () {
    const { id } = this.$route.query
    if (id) {
      this.updateTagsListList({
        page: this.page,
        pageSize: this.pageSize,
        subjectID: id
      })
    } else {
      this.updateTagsListList({
        page: this.page,
        pageSize: this.pageSize
      })
    }
    this.updateSubjectsType()
  },
  methods: {
    ...mapActions('tags', [
      'updateTagsListList'
    ]),
    ...mapActions('subjects', [
      'updateSubjectsType'
    ]),
    clear () {
      this.tagsRuleForm = {
        tagName: '',
        state: ''
      }
    },
    // 搜索
    search () {
      let f = 0
      const form = {}
      for (const key in this.tagsRuleForm) {
        if (this.tagsRuleForm[key] !== '') {
          f = 1
          form[key] = this.tagsRuleForm[key]
        }
      }
      if (f) {
        this.updateTagsListList({
          ...form,
          page: this.page,
          pageSize: this.pageSize
        })
      } else {
        this.updateTagsListList({
          page: this.page,
          pageSize: this.pageSize
        })
      }
    },
    onAddSubjects () {
      this.editTagVisible = true
    },
    onCurrentPageChange (page) {
      this.page = page
      this.updateTagsListList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    onPageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.page = 1
      this.updateTagsListList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    getRowClass ({ rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f8f8f9; border-bottom: 2px solid #dcdcdc'
      }
    },
    changeState ({ row }) {
      changeState({
        ...row,
        state: row.state === '已启用' ? 0 : 1
      })
      this.updateTagsListList({
        page: this.page,
        pageSize: this.pageSize
      })
    },
    // 删除
    deleteInfo ({ row }) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row)
          .then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        this.updateTagsListList({
          page: this.page,
          pageSize: this.pageSize
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editTags ({ row }) {
      this.addtagRuleForm.subjectID = row.subjectID
      this.addtagRuleForm.tagName = row.tagName
      this.editTagVisible = true
      this.addtagRuleForm = {
        ...this.addtagRuleForm,
        id: row.id
      }
      console.log(row)
    },
    oneditTagOk () {
      if (this.addtagRuleForm.id) {
        update(this.addtagRuleForm)
      } else {
        add(this.addtagRuleForm)
      }
      this.updateTagsListList({
        page: this.page,
        pageSize: this.pageSize
      })
      this.oneditTagClose()
    },
    oneditTagClose () {
      this.addtagRuleForm = {
        subjectID: '',
        tagName: ''
      }
      this.editTagVisible = false
    }
  }
}
</script>

<style scoped lang='sass'>
.container
  background-color: #fff
  padding: 20px
  .app-container
    padding: 0
.addSubjects
  float: right
.total
    font-size: 14px
    background-color: #eee
    padding: 8px
    width: calc(100% - 8px)
    border-radius: 5px
    margin-bottom: 20px
    color: #666
    .total-font
      margin-left: 6px
.input-width
    width: 260px
.el-col-6
  width: 100%
</style>
